<template>
  <div class="container">
    <!-- <h1>我是index页面</h1> -->
    <div class="nav-search">
      <el-input
        v-model="input"
        placeholder="请输入姓名模糊搜索"
        style="width: 340px; margin-left: 30px; margin-right: 20px"
      />
      <el-button type="primary">搜索</el-button>
    </div>
    <div class="datalist">
      <!-- 封装的elememt表格组件 -->
      <e-table :tableHeadConfig="tableHeadConfig" :tableLoadData="tableData">
        <template v-slot:average="slotData">
          <span>{{
            (
              (slotData.data.row.Machine_test_one +
                slotData.data.row.written_examination_one +
                slotData.data.row.Machine_test_two) /
              3
            ).toFixed(2)
          }}</span>
        </template>
        <template v-slot:average_two="slotData">
          <span>{{
            (
              (slotData.data.row.Machine_test_three +
                slotData.data.row.written_examination_two +
                slotData.data.row.Machine_test_four) /
              3
            ).toFixed(2)
          }}</span>
        </template>
        <template v-slot:operation="slotData">
            <el-button type="primary">查看{{slotData.data.row.id}}</el-button>
        </template>
      </e-table>
    </div>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs, onMounted } from "vue";
import eTable from "../../components/ElementTable/index.vue";
export default {
  name: "app",
  components: {
    eTable,
  },
  setup() {
    // 数据
    const data = reactive({
      tableData: [
        {
          id: 1,
          name: "张三",
          Machine_test_one: 99,
          written_examination_one: 89,
          Machine_test_two: 77,
          Machine_test_three: 69,
          written_examination_two: 84,
          Machine_test_four: 82,
        },
      ],
      tableHeadConfig: [
        {
          label: "ID",
          field: "id", //列的对应值
          width:80,
        },
        {
          label: "姓名",
          field: "name",
          //   columnType: "slot", //定义当前列为插槽
          //   slotName: "imgurl", //定义当前列插槽的名字
          width:80,
        },
        {
          label: "机试成绩",
          field: "Machine_test_one",
          //   columnType: "slot",
          //   slotName: "openid",
        },
        {
          label: "笔试",
          field: "written_examination_one",
        },
        {
          label: "机试成绩",
          field: "Machine_test_two",
          //   columnType: "slot",
          //   slotName: "operation",
          //   width: 260,
        },
        {
          label: "平均分",
          //   field: "average",
          columnType: "slot",
          slotName: "average",
          //   width: 260,
          sortable: true, //定义当前列的排序

        },
        {
          label: "机试成绩",
          field: "Machine_test_three",
          //   columnType: "slot",
          //   slotName: "openid",
        },
        {
          label: "笔试",
          field: "written_examination_two",
        },
        {
          label: "机试成绩",
          field: "Machine_test_four",
          //   columnType: "slot",
          //   slotName: "operation",
          //   width: 260,
        },
        {
          label: "平均分",
          //   field: "average",
          columnType: "slot",
          slotName: "average_two",
          //   width: 260,
          sortable: true, //定义当前列的排序
        },
        {
          label: "操作",
          //   field: "average",
          columnType: "slot",
          slotName: "operation",
          //   width: 260,
        },
      ],
    });
    onMounted(() => {
      console.log("onMounted");
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style scoped lang='less'>
.datalist {
  width: 93%;
  height: 500px;
  background: #fff;
  margin: auto;
  margin-top: 30px;
}
.container {
  overflow: hidden;
}
.nav-search {
  width: 93%;
  height: 100px;
  background: #fff;
  margin: auto;
  margin-top: 30px;
  display: flex;
  align-items: center;
}
</style>